<script setup>
import QRCode  from "qrcode";
import { onMounted, ref, watch } from 'vue';
onMounted(() => {
  useqrcode()
})
const props = defineProps({
  text: {
    type: String,
    default: 'text'
  }
})
const qrCodeSrc = ref('')

const baseUrl = 'http://121.40.145.243:5438/#/pages/index/index?'
const opts = ({
  errorCorrectionLevel: 'L',
  type: 'image/png',
  margin: 2,
  width: 500
})
watch(() => props.text, useqrcode)

function useqrcode() {
  const text = baseUrl + props.text
  try {
    QRCode.toDataURL(text, opts.value, function (err, url) {
      if (err) throw err
      qrCodeSrc.value = url
    })
  } catch (e) {
    console.log(e)
  }
}

const viewVisible = ref(false)
function viewQrCode() {
  viewVisible.value = true
}

</script>
<template>
  <div class="qr-code" :key="text">
    <el-image :src="qrCodeSrc" @click="viewQrCode" class="img" lazy />
    <el-image-viewer
      v-if="viewVisible"
      :url-list="[qrCodeSrc]"
      hide-on-click-modal
      teleported
      @close="
        () => {
          viewVisible = false
        }
      "
    />
  </div>
</template>

<style lang="less" scoped>
</style>
